<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="/static/img/favicon.ico" rel="shortcut icon">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .container {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 300px;
        width: 100%;
      }

      .container h2 {
        text-align: center;
        margin-bottom: 20px;
      }

      .form-group {
        margin-bottom: 20px;
      }

      .form-group label {
        display: block;
        margin-bottom: 5px;
      }

      .form-group input {
        width: calc(100% - 22px); /* 调整输入框的宽度 */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .form-group input:focus {
        outline: none;
        border-color: #007bff;
      }

      .btn {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
      }

      .btn:hover {
        background-color: #0056b3;
      }
    </style>
    
  </head>
  <body>
    <div class="container">
      <h2>Login</h2>
      <form action="#">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required />
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required />
        </div>
        <button type="submit" class="btn" onclick="onSignin()">Login</button>
      </form>
    </div>
  </body>
  <script lang="javascript">
    function onSignin() {
      var username = document.getElementById('username');
      var password = document.getElementById('password');
      $.ajax({
    	url: "/user/signin",
    	type: "POST",
    	data: {
    	  "username": username.value,
    	  "password": password.value
    	},
    	error: function (jqXHR, textStatus, errorThrown) {
    	  if (textStatus == "error") {
    		alert(textStatus + " : " + errorThrown);
    	  } else {
    		alert(textStatus);
    	  }
    	},
    	success: function (body, textStatus, jqXHR) {
    	  var resp = JSON.parse(body);
    	  localStorage.setItem("token", resp.data.Token)
    	  localStorage.setItem("username", resp.data.Username)
    	  window.location.href = resp.data.Location;
    	}
      });
    }
  </script>
</html>
